<template>
	<view class="container">
		<view class="top-bg"></view>
		<up-navbar :fixed="false" leftIconColor="transparent" bgColor="transparent">
			<template #center>
				<view style="color:#fff;">个人中心</view>
			</template>
		</up-navbar>
		<view class="user-info">
			<img :src="personData.avatar" alt="" class="avatar" />
			<view class="right">
				<view class="name-box">
					<view class="userName">
						{{personData.nickname}}
					</view>
					<img src="@/static/editor.png" alt="" class="editor" @click="editor" />
				</view>
				<view class="phone">
					{{personData.phone.substr(0, 3) + "****" + personData.phone.substr(7)}}
				</view>
			</view>
		</view>
		<view class="order-box">
			<view class="title">我的订单</view>
			<view style="display: flex;justify-content: space-between;">
				<view v-for="(listItem,listIndex) in orderList" :key="listIndex"
					style="display: flex;flex-direction: column;align-items: center;" @click="order(listIndex)">
					<img :src="listItem.icon" alt="" style="width:60rpx;height:60rpx;margin-top: 20rpx;" />
					<text class="grid-text">{{listItem.title}}</text>
				</view>
			</view>

		</view>
		<view class="service-box">
			<view class="title">我的服务</view>
			<up-cell-group :border="false">
				<up-cell title="官方客服" isLink>
					
						<template #icon>
							<img src="@/static/center1-1.png" alt="" style="width:60rpx;height:60rpx;" />
						</template>
					<template #title>
						<up-button :hairline="false" open-type="contact" customStyle="background:translate;border:none;justify-content: flex-start;padding: 0;font-size:30rpx;height:30rpx">官方客服</up-button>
							</template>
				</up-cell>
				<up-cell title="收获地址" isLink url="/pages/address/address">
					<template #icon>
						<img src="@/static/center2-1.png" alt="" style="width:60rpx;height:60rpx;" />
					</template>
				</up-cell>
				<up-cell title="我的余额" isLink url="/pages/order/balance_list">
					<template #icon>
						<img src="@/static/center3-1.png" alt="" style="width:60rpx;height:60rpx;" />
					</template>
				</up-cell>
				<up-cell title="平台协议" isLink url="/pages/agreement/agreement">
					<template #icon>
						<img src="@/static/center4-1.png" alt="" style="width:60rpx;height:60rpx;" />
					</template>
				</up-cell>
			</up-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from 'uview-plus'
	export default {
		data() {
			return {
				orderList: [{
						title: '待付款',
						icon: '../../static/center1.png'
					},
					{
						title: '待收货/使用',
						icon: '../../static/center2.png'
					},
					{
						title: '我的订单',
						icon: '../../static/center3.png'
					},
					{
						title: '退款/售后',
						icon: '../../static/center4.png'
					}
				],
				personData:{}
			}
		},
		onShow() {
			this.userData()
		},
		methods: {
			async userData() {
				await http.post('/shop/user/read').then(res => {
					console.log(res)
					this.personData = res
				})
			},
			order(e) {
				switch (e) {
					case 3:
						uni.navigateTo({
							url: '/pages/after_sale/after_sale_list'
						})
						break;
					default:
						uni.navigateTo({
							url: '/pages/my_order/my_order?index=' + (e + 1)
						})
						break;

				}

			},
			editor() {
				uni.navigateTo({
					url: '/pages/personal_information/personal_information'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #F2F5F6;
	}

	.container {
		.top-bg {
			width: 100%;
			height: 534rpx;
			position: fixed;
			z-index: -1;
			overflow: hidden;
			top: 0
		}

		.top-bg::after {
			content: '';
			width: 120%;
			height: 534rpx;
			position: absolute;
			left: -10%;
			top: 0;
			z-index: -1;
			border-radius: 0 0 20% 20%;
			background: linear-gradient(137deg, #00D2C6 6%, #0B9EE2 58%);
		}

		.user-info {
			padding: 40rpx;
			box-sizing: border-box;
			@include flex(row);

			.avatar {
				width: 160rpx;
				height: 160rpx;
				opacity: 1;
				border-radius: 50%;
				border: 6rpx solid #FFFFFF;
				margin-right: 32rpx;
			}

			.right {
				@include flex(column);
				justify-content: space-around;

				.name-box {
					@include flex(row);
					align-items: center;
					font-size: 48rpx;
					font-weight: normal;
					color: #FFFFFF;

					.userName {
						max-width: 300rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.editor {
						width: 40rpx;
						height: 40rpx;
						margin-left: 34rpx;
					}
				}

				.phone {
					font-size: 24rpx;
					font-weight: normal;
					color: #FFFFFF;
				}


			}

		}

		.order-box {
			width: 718rpx;
			height: 248rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			background-color: #FFFFFF;
			padding: 32rpx;
			box-sizing: border-box;

			.grid-text {
				font-size: 28rpx;
				text-align: center;
			}
		}

		.service-box {
			width: 718rpx;
			border-radius: 16rpx;
			margin: 0 auto;
			background-color: #FFFFFF;
			padding: 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;

			.u-cell__body {
				padding: 20rpx 0;
			}
		}

		.title {
			font-family: 思源黑体;
			font-size: 36rpx;
			font-weight: normal;
			color: #333333;
			margin-bottom: 10rpx;

		}
	}
</style>